<template>
	<view class="content">
		<view class="topbak" :style="{ height: sH +10+ 'px' }">

		</view>
		<navigator hover-class="none" class="nav-box" open-type="navigateBack">
			<u-icon name="arrow-left" color="#000000" label-color="#000000" :size="20" :label-size="18"
				label="我的钱包"></u-icon>
		</navigator>
		<view class="bag_bg flex-col justify-around">
			<view class="bg_o">
				我的佣金(元)
			</view>
			<view class="bg_t">
				{{info.my_commission||0.00}}
			</view>
			<view class="bg_h flex">
				<view class="">
					可提现 ￥{{info.withdrawable||0.00}}
				</view>
				<view class="" style="margin-left: 150rpx">
					已提现 ￥{{info.withdrawn||0.00}}
				</view>
			</view>
			<image src="@/static/积分图标 1.png" mode="widthFix" style="width: 144rpx;" class="img2"></image>
		</view>
		<view class="table_t">
			<view class="flex justify-between">
				<view class="t_o">
					资金记录
				</view>
				<view class="t_t flex-center" @click="show = true">
					<view class="" style="margin-right: 5rpx;">
						提现规则
					</view>
					<u-icon name="question-circle"></u-icon>
				</view>
			</view>
			<view class="t_item flex-col flex-center" v-for="i in infot">
				<view class="flex justify-between" style="width: 100%;padding: 0 24rpx;">
					<view class="left flex">
						<view class="son flex-center" v-if="i.is_image==1">
							<image :src="i.image" mode="widthFix"></image>
						</view>
						<view class="son flex-center" v-else>
							{{i.title}}
						</view>
						<view class="son_t flex-col justify-around">
							<view class="o">
								{{i.order}}
							</view>
							<view class="t">
								{{i.createtime}}
							</view>
						</view>
					</view>
					<view class="flex-center" :class="i.type==1?'right':'right2'">
						{{i.type==1?'+':'-'}}{{i.money}}
					</view>
				</view>
			</view>
		</view>
		<view class="txje flex-center" @click="$msg.Navigoto('/pages/my/pursetx')">
			提现
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="center"  :round="24">
			<view class="pop">
				<view class="title">提现规则</view>
				<view class="con" v-html="ruleinfo">
					
				</view>
				<view class="btn flex-center" @click="close()">
					知道了
				</view>
			</view>
		</u-popup>
		<image src="@/static/logo.png" mode="widthFix" style="width: 294px;height: 15.68px;position: absolute;bottom: 0;margin: 40rpx 0;">
		</image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				sH: 0,
				info:'',
				infot:[],
				page:1,
				ruleinfo:'',
				pagesize:5
			}
		},
		onShow() {
			this.financialrecords_list()
		},
		onLoad() {
			this.getWinTop().then(res => {
				this.sH = res.statusBar;
			});
			this.my_wallet()
			this.rule()
		},
		onReachBottom() {
			this.page++
			this.financialrecords_list()
			console.log('a');
		},
		methods: {
			financialrecords_list(){
				this.$api.financialrecords_list({
					page:this.page,
					pagesize:this.pagesize
				}).then(res=>{
					this.infot=this.infot.concat(res.data)
				})
			},
			my_wallet(){
				this.$api.my_wallet({
					
				}).then(res=>{
					this.info=res.data
				})
			},
			rule(){
				this.$api.rule({
					name:'rider_rules'
				}).then(res=>{
					this.ruleinfo=res.data
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
	}
	.u-safe-area-inset-bottom{
		padding-bottom: 0 !important;
	}
	.txje{
		width: 686rpx;
		height: 100rpx;
		background: #3377FF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51,119,255,0.3);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		position: fixed;
		bottom: 100rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.pop {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding-bottom: 30rpx;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			color: #00091A;
			margin: 40rpx 0;
			text-align: center;
		}
		.con{
			padding: 0 32rpx;
			font-size: 28rpx;
			color: #00091A;
		}
		.btn{
			width: 622rpx;
			height: 100rpx;
			background: #3377FF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 0 auto;
			    margin-top: 50rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.nav-box {
			width: 100%;
		}

		.bag_bg {
			padding-left: 40rpx;
			margin-top: 40rpx;
			position: relative;
			background: url('@/static/Group.png');
			background-size: cover;
			width: 686rpx;
			height: 320rpx;

			.img2 {
				top: 40rpx;
				right: 64rpx;
				position: absolute;
			}

			.bg_o {
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.bg_t {
				font-size: 52rpx;
				color: #FFFFFF;
			}

			.bg_h {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.table_t {
			width: 100%;
			padding: 0 32rpx;
			margin: 50rpx 0;
			.t_o {
				font-weight: bold;
				font-size: 32rpx;
				color: #00091A;
			}

			.t_t {
				font-size: 28rpx;
				color: #999CA3;
			}

			.t_item {
				margin: 50rpx 0;
				width: 686rpx;
				height: 144rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.left {
					.son {
						width: 96rpx;
						height: 96rpx;
						background: #F4F8FF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-weight: bold;
						font-size: 32rpx;
						color: #3377FF;


					}

					.son_t {
						margin-left: 20rpx;

						.o {
							font-weight: bold;
							font-size: 28rpx;
							color: #00091A;
						}

						.t {
							font-size: 24rpx;
							color: #CCCED1;
						}
					}

				}

				.right {
					font-weight: bold;
					font-size: 36rpx;
					color: #3377FF;
				}
				
				.right2 {
					font-weight: bold;
					font-size: 36rpx;
					color: #FF6401;
				}
			}
		}

	}
</style>